<template>
	<view class="user-area">
		<view class="header-area padding-lr-sm" :class="paddingTop">
			<view class="dflex-b">
				<view class="member-area padding-top-sm margin-bottom dflex pos-r" >
					<view>
						<image mode="aspectFit" class="headimg border-radius-c" :src="userInfo.avatar || 'https://img.shihuashengyi.cn/static/images/user/default.png'"></image>
					</view>
					<view class="margin-left-sm">
						<view class="info-box">
							<text v-if="isLogin" class="fs-lg">{{ userInfo.account }}</text>
							<text v-else class="fs-lg" @click="to('/pages/login/login')">去登录</text>
						</view>
						<view v-if="isLogin"><text class="fs-xxs">UID:{{ userInfo.uid }}</text></view>
						<view v-if="isLogin"><text class="fs-xxs">服务经理:{{ userInfo.spreadId }}</text></view>
					</view>
					<!-- <view  class="padding" @click.stop="updateMember">
						<view :class="{ 'rotate': isreq }" class="animated iconfont">&#xe6ff;</view>
					</view> -->
				</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<view class="border-radius-big bg-base dflex-c padding-lr margin-right" @click="to('/pagesA/user/distribution/bonus-record')">
					<view class="iconfont fs-xl iconqiandao margin-right-xs"></view>
					<view>红包</view>
				</view>
				<!-- #endif -->
			</view>
			
			<!-- #ifdef APP-PLUS || H5 -->
			<view class="border-radius">
				<view class="vip-card-area pos-r padding-lr-lg use-hover">
					<view class="dflex-b">
						<view class="dflex">
							<text class="iconfont iconhuiyuan ft-base line-height-1 margin-right-xs"></text>
							<view class="animated uscroll">
								<text class="margin-left-xs">{{userSignZidian[userInfo.userSign]}}</text>
							</view>
				
						</view>
						<view class="">
							<text style="color: #b65b5d;border: 1px solid #b65b5d;"
								class="fs-xs border-radius-lg padding-tb-xs padding-lr-sm">红包资格:{{userInfo.bonusStatus?"有资格":"无资格"}}</text>
						</view>
					</view>
				</view>

				<view class="stats-area dflex-c bg-main" >
					<view class="item dflex dflex-flow-c" @click="to('/pagesA/user/distribution/purchase-history?category=0&title=平台余额明细')">
						<text class="num">{{ userInfo.sysBalance || 0 }}</text>
						<text>福利红包</text>
						<view class="vertical-line"></view>
					</view>
					<view class="item dflex dflex-flow-c" @click="to('/pagesA/user/distribution/purchase-history?category=1&title=平台积分明细')">
						<text class="num">{{ userInfo.sysIntegral || 0 }}</text>
						<text>平台积分</text>
						<view class="vertical-line"></view>
					</view>
					<view class="item dflex dflex-flow-c" @click="to('/pagesA/user/distribution/purchase-history?category=0&type=9&title=团队收益明细')">
						<text class="num">{{ userInfo.earningsTotal || 0 }}</text>
						<text>服务商收益</text>
						<view class="vertical-line"></view>
					</view>
				</view>
				<view class="stats-area dflex-c bg-main">
					<view class="item dflex dflex-flow-c" @click="to('/pagesA/user/distribution/purchase-history?category=3&title=消费专享金明细')">
						<text class="num">{{ userInfo.earmarkedMoney|| 0 }}</text>
						<text>消费专享金</text>
						<view class="vertical-line"></view>
					</view>
					<view class="item dflex dflex-flow-c" @click="to('/pagesA/user/distribution/purchase-history?category=2&title=贡献值明细')">
						<text class="num">{{ userInfo.sysContribute|| 0 }}</text>
						<text>贡献值</text>
						<view class="vertical-line"></view>
					</view>
					<view class="item dflex dflex-flow-c" >
						<text class="num">{{userInfo.bonusOrders||0}}</text>
						<text>公益订单总额</text>
					</view>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<view class="container-area padding-lr-sm padding-bottom-sm">
			<!-- 我的订单 -->
			<view class="border-radius margin-top-sm bg-main">
				<use-list-title title="我的订单" iconfont="icondingdan" color="#ff6a6c" fwt="600"></use-list-title>
				<view class="order-area padding-bottom-sm padding-lr dflex-c">
					<!-- #ifdef MP-WEIXIN -->
					<view class="item dflex dflex-flow-c" @click="toOrder('/pages/user/order/order-intergral?status=-2', '待支付')">
						<view class="iconfont">&#xe6da;</view>
						<text>待支付订单</text>
					</view>
					<!-- #endif -->
					<view class="item dflex dflex-flow-c" @click="toOrder('/pages/user/order/order-intergral?status=-1', '待发货')">
						<view class="iconfont">&#xe6da;</view>
						<text>已支付订单</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/pages/user/order/order-intergral?status=1', '已签收')">
						<view class="iconfont">&#xe6d9;</view>
						<text>收货订单</text>
					</view>
					<view class="item dflex dflex-flow-c" @click="toOrder('/pages/user/order/order-intergral', '所有订单')">
						<view class="iconfont">&#xe6d9;</view>
						<text>所有订单</text>
					</view>
					<!-- #ifdef APP-PLUS || H5 -->
					<!-- <view class="item dflex dflex-flow-c">
						<view class="price">
							{{ userInfo.bonusTotal|| 0 }}
						</view>
						<text>红包领取总额</text>
					</view> -->
					<!-- #endif -->
				</view>
			</view>

			<view class="border-radius margin-top-sm bg-main">
				<!-- #ifdef APP-PLUS || H5 -->
				<use-list-title title="我的团队" iconfont="icongerenzhongxin-" color="#9776ff" fwt="600" tip="查看我的团队" @goto="to('/pagesA/user/team/team')"  ></use-list-title>
				<use-list-title title="我的钱包" iconfont="iconqianbao-01" color="#9776ff" fwt="600" tip="充值、提现"
					@goto="to('/pagesA/user/wallet/wallet')"></use-list-title>
					
				<use-list-title title="转户通道" iconfont="iconfenxiaozhongxin-01" color="#ff756e" fwt="600" tip=" "
					@goto="to('/pagesA/user/distribution/distribution')" ></use-list-title>
					
				<!-- #endif -->
				
				<use-list-title title="收货人地址" iconfont="icondizhi-" color="#5a9ded" fwt="600"
					@goto="to('/pages/user/address/address')"></use-list-title>
				<use-list-title title="意见反馈" iconfont="iconchangjianwenti-01" color="#ffab6c" fwt="600"
					@goto="to('/pages/user/setting/feedback')"></use-list-title>
				<use-list-title title="设置" iconfont="iconshezhi-" color="#58bc8a" fwt="600" 
					@goto="to('/pages/user/setting/setting')"></use-list-title>
			</view>

			<view v-if="isLogin" class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn"
				@click="openActionSheet">
				<text class="cell-tit">退出登录</text>
			</view>
			<view v-else class="border-radius margin-top-sm padding-sm dflex-c bg-main log-out-btn"
				@click="to('/pages/login/login')">
				<text class="cell-tit">去登录</text>
			</view>

			<!-- 操作菜单 -->
			<use-action-sheet v-model="actionSheetShow" :list="actionSheetList" :tips="actionSheetTips"
				@click="actionSheetClick" @close="actionSheetClose"></use-action-sheet>
		</view>

		<!-- 世华圣医圣医版权 -->
		<use-copyright></use-copyright>
	</view>
</template>
<script>
	import { mapState, mapMutations } from 'vuex';
	import {balance_query} from "../../js_sdk/apis/user.js"
	const _history = 'usemall-goods-history'
	export default {
		computed: {
			paddingTop() {
				// #ifdef H5 || MP-ALIPAY
				return 'padding-top';
				// #endif
				return 'padding-top-big';
			},
			userInfo(){
				return this.$store.state.user.userInfo
			},
			isLogin(){
				return this.$store.getters['user/hasLogin']
			}
		},
		data() {
			return {
				isreq: false,
				userSignZidian:{
					0:"消费会员",
					1:"创客天使",
					2:"社区店长",
					3:"区县级服务商",
					4:"地市级服务商",
					5:"省级服务商"
				},
				// 浏览历史
				historyDatas: [],
				// 统计数据
				stats: {},
				actionSheetShow: false,
				actionSheetList: [],
				actionSheetTips: {
					text: "",
					color: "#9a9a9a",
					size: 24
				},

				is_mp: false,
				is_alipay: false,
				signed: false,
			};
		},
		onLoad() {
			
		},
		onShow() {
			let _this = this;
			if (!this.isLogin) {
				this.stats = {};
				this.historyDatas = [];
				this.$api.msg('账号未登录');
				return;
			}else{
				this.$store.dispatch('user/GetInfo')
			}
			this.loadData();
		},
		methods: {
			// 加载数据
			loadData() {
				
			},
			// 打开操作菜单
			openActionSheet() {
				this.actionSheetShow = true;
				this.$api.timerout(() => {
					this.actionSheetList = [{
						text: "退出登录",
						color: "#333"
					}];
				}, 0);
			},
			// 关闭操作菜单
			actionSheetClose() {
				console.log(this.actionSheetShow);
			},
			// 点击操作菜单
			actionSheetClick(index) {
				switch (index) {
					case 0:
						this.$store.dispatch('user/LogOut');
						this.$api.msg('退出成功');
						this.$api.timerout(() => {
							this.$api.tohome();
						}, 200);
						break;
					case 1:
						this.$api.tologin();
						break;
				}
			},

			updateMember() {
				if (this.isreq) return;
				this.isreq = true;
				let _this = this;
				
				uni.getUserProfile({
					desc: '更新会员信息',
					lang: 'zh_CN',
					success(res) {
						_this.$func.usemall.call('member/update', {
							nickname: res.userInfo.nickName,
							gender: res.userInfo.gender,
							avatar: res.userInfo.avatarUrl,
							comment: [res.userInfo.country, res.userInfo.province, res.userInfo.city].filter(x => x).join('-')
						}).then(res => {
							_this.isreq = false;
							
							if (res.code == 200) {
								_this.loadData();
								return;
							}

							_this.$api.msg(res.msg);
						})
					},
					fail(err) {
						console.log(err);
						_this.isreq = false;
					}
				});
			},
			toNotice(){
				uni.navigateTo({
					url:"notice"
				})
			},
			// 统一跳转接口，拦截未登录路由
			to(url) {
				if (!this.isLogin) {
					this.$api.tologin()
					return;
				}

				uni.navigateTo({
					url,
					fail: (res) => {
						console.log(res)
					}
				});
			},
			// 跳转到 订单
			toOrder(url, state) {
				if (!this.isLogin) {
					this.$api.tologin()
					return;
				}

				uni.setStorage({
					key: '__order_state',
					data: state,
					success(res) {
						console.log(res);
					},
					complete() {
						uni.navigateTo({
							url
						});
					}
				});
			},

			// 跳转商品详情
			togoods(item) {
				this.$api.togoods({
					id: item._id
				});
			},
			tovip() {
				// console.log('share_mid', uni.getStorageSync('__use_share_mid'))
				// this.$api.msg('share_mid ' + uni.getStorageSync('__use_share_mid'));
				
				if (this.userInfo.userSign>0) {
					uni.navigateTo({
						url: `/pages/user/member/member`
					});
					return;
				}
				
				uni.navigateTo({
					url: `/pages/user/member/member-not`
				});
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: $page-color-base;
	}

	.member-area {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}

	.vip-card-area {
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		font-size: 24rpx;
		color: #c6b181;
		background-color: #000000;
		/* 不支持线性的时候显示 */
		background-image: linear-gradient(to right, #3a3a3a, #000000);
		
		.iconfont{font-size: 66rpx;}
	}

	.stats-area {
		.item {
			padding: 10rpx 0;
			
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 6rpx;
		}
	}

	.order-area {
		.item {
			.price{
				height:66rpx;
				line-height:66rpx;
			}
		}

		.iconfont {
			position: relative;
			font-size: $font-lg + 8upx;

			.badge {
				right: initial;
			}
		}
	}

	.stats-area .item,
	.order-area .item {
		position: relative;
		font-size: $font-sm;
		color: $font-color-base;
		flex: 1;
	}

	.browsing-area {
		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	.log-out-btn {
		color: $font-color-base;
	}
</style>
